// 获取登录用户JSON字符串内容
function getUser() {
    let userStr = localStorage.getItem("USERNAME")
    let user = JSON.parse(userStr) || []
    if (user == '') {
        $('#container').html(`请先登录!&nbsp;&nbsp;&nbsp;&nbsp;正在跳转到登录界面...`)
        window.setTimeout(function () {
            location.href = '../pages/login.html'
        }, 1500)
        return
    }
    let htmlTxt = template('user', {
        user
    })
    $('.header_user').html(htmlTxt)
}
getUser()
// 设置跳转到首页页面
$('.herder_logo').on('click', function () {
    location.href = '../pages/index.html'
})
// 退出登录
$('#exetUser').on('click', function () {
    location.href = '../pages/login.html'
})


// 全选按钮设置为未选择
let stateAll = false
// 总价默认为0
let allSinglePrice = 0

// 获取购物车JSON字符串内容
let carsStr = localStorage.getItem("CARSSHOPLIST")
let cars = JSON.parse(carsStr) || []
// 显示所有商品
function showProduct() {
    // 循环列表计算小计价格
    cars.forEach(function (item) {
        item.singlePrice = (item.price * item.num).toFixed(2)
    })
    let carList = {
        stateAll,
        cars
    }
    let htmlTxt = template('showcarsList', carList)
    $('table').html(htmlTxt)
    // 计算总价
    totalPrice()
    // 跳转到详情页
    jumpToDetails()
}

// 委托处理
function entrustProcessing() {
    // 删除功能
    $('table').on('click', '.delete', function () {
        // 找删除商品的id
        let id = $(this).parent().parent().children().eq(1).html()
        // findIndex会返回满足条件的索引号
        let index = cars.findIndex(item => item.id == id)
        // 删除对应索引号的数组
        cars.splice(index, 1)
        // 改变之后，数字转为JSON字符串然后存储
        localStorage.setItem("CARSSHOPLIST", JSON.stringify(cars))
        // 如果所有复选框都为true状态，则设置全选框为true
        stateAll = cars.every(item => item.state == true)
        console.log(cars)
        if (cars == '') {
            // 将全选按钮重置为false
            stateAll = false
        }
        // 重新刷新商品显示
        showProduct()
    })
    // 购买数量加一
    $('table').on('click', 'input[name="plus"]', function () {
        // 找要数量加加的商品的id
        let id = $(this).parent().parent().children().eq(1).attr('index_id')
        // find返回满足条件的元素
        let product = cars.find(item => item.id == id)
        product.num++
        // 改变之后，数字转为JSON字符串然后存储
        localStorage.setItem("CARSSHOPLIST", JSON.stringify(cars))
        // 重新刷新商品显示
        showProduct()
    })
    // 购买数量减一
    $('table').on('click', 'input[name="minus"]', function () {
        // 找要数量减减的商品的id
        let id = $(this).parent().parent().children().eq(1).attr('index_id')
        // find返回满足条件的元素
        let product = cars.find(item => item.id == id)
        product.num--
        // 改变之后，数字转为JSON字符串然后存储
        localStorage.setItem("CARSSHOPLIST", JSON.stringify(cars))
        // 重新刷新商品显示
        showProduct()
    })
    // 全选
    $('table').on('click', 'input[name="checkAll"]', function () {
        // 状态反转
        stateAll = !stateAll
        // 如果全选为true，则遍历所以复选并选中
        if (stateAll) {
            cars.forEach(item => item.state = true)
        } else {
            cars.forEach(item => item.state = false)
        }
        // 改变之后，数字转为JSON字符串然后存储
        localStorage.setItem("CARSSHOPLIST", JSON.stringify(cars))
        // 重新刷新商品显示
        showProduct()
    })
    // 复选
    $('table').on('click', 'input[name="checkItem"]', function () {
        // 寻找点击对象所在的商品id号
        let id = $(this).parent().next().attr('index_id')
        // 遍历数组寻找一样id的元素
        let product = cars.find(item => item.id == id)
        // 将复选的id的状态反转
        product.state = !product.state
        // 如果所有复选框都为true状态，则设置全选框为true
        stateAll = cars.every(item => item.state == true)
        // 改变之后，数字转为JSON字符串然后存储
        localStorage.setItem("CARSSHOPLIST", JSON.stringify(cars))
        // 重新刷新商品显示
        showProduct()

    })
    // 改变输入框的购买数量
    $('table').on('change', 'input[name="amount"]', function () {
        // 寻找点击对象所在的商品id号
        let id = $(this).parent().parent().children().eq(1).attr('index_id')
        // 遍历数组寻找一样id的元素
        let newCars = cars.find(item => item.id == id)
        // 将输入的数量赋值给相对应的的数组中的值
        newCars.num = $(this).val()
        // 改变之后，数字转为JSON字符串然后存储
        localStorage.setItem("CARSSHOPLIST", JSON.stringify(cars))
        // 重新刷新商品显示
        showProduct()
    })
}
// 计算总价
function totalPrice() {
    let totalPrice = cars.reduce(function (s, item) {
        return s += Number(item.singlePrice)
    }, 0)
    $('#totalPrice').html(`￥${totalPrice.toFixed(2)}`)
}
// 结算
function settleAccounts() {
    $('.settleAccounts').on('click', function () {
        alert('购买成功')
    })
}
settleAccounts()

// 删除选中状态的商品
function delProduct() {
    // 创建点击事件
    $('#delChecked').on('click', function () {
        // 把复选按钮为选中状态的的商品筛选出来到一个新数组
        let newArr = cars.filter(function (item) {
            return item.state == true
        })
        // 将原数组遍历与新数组匹配
        for (i = 0; i < cars.length; i++) {
            newArr.forEach(function (item) {
                // 如果匹配到了相同的id，原数组就执行删除操作
                if (cars[i].id == item.id) {
                    cars.splice(i, 1)
                }
            })
        }
        // 将全选按钮重置为false
        stateAll = false
        // 改变之后，数字转为JSON字符串然后存储
        localStorage.setItem("CARSSHOPLIST", JSON.stringify(cars))
        // 重新刷新页面
        showProduct()
    })
}
// 跳转到详情页
function jumpToDetails() {
    $('#container .allTr').on('click', 'img', function () {
        // 寻找点击对象所在的商品id号
        // let id = $(this).parent().parent().children().eq(1).attr('index_id')
        let productID = $(this).parent().attr('index_id')
        localStorage.setItem('PRODUCTID', productID)
        location.href = '../pages/detailPage.html'
        // console.log($(this).attr('id'))
    })
    $('#container .allTr').on('click', 'p[name="title"]', function () {
        // 寻找点击对象所在的商品id号
        // let id = $(this).parent().parent().children().eq(1).attr('index_id')
        let productID = $(this).parent().prev().attr('index_id')
        localStorage.setItem('PRODUCTID', productID)
        location.href = '../pages/detailPage.html'
        // console.log($(this).attr('id'))
    })
}
// 显示所有商品
showProduct()
// 委托处理事件
entrustProcessing()
// 删除选中状态的商品
delProduct()